<script setup>
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import { RULE } from "../../../const/index.js";
import { reactive, ref } from "vue";
import { insertApi } from "../../../api/axios.js";

/*======================================页面常量=============================================================*/
// 路径导航
const navItems = [
  { icon: 'User', label: '用户管理' },
  { icon: 'Flag', label: '菜单列表（一级菜单）', url: '/Menu' },
  { icon: 'Plus', label: '添加菜单（一级菜单）' },
];

/*======================================添加表单=============================================================*/
// 表单项 + 表单值 + 表单规则
let items = ref([
  { label: '标题', prop: 'title', required: true, span: 12 },
  { label: '排序', prop: 'idx', type: 'number', min: 1, required: true, span: 12 },
  { label: '图标', prop: 'icon', type: 'icon', required: true },
  { label: '描述', prop: 'info', required: true, type: 'textarea' },
]);
let data = reactive({ info: '暂无描述' });
let rules = { info: RULE.INFO, icon: RULE.MENU_ICON };

/**
 * 添加成功后调用
 * 1. 路由到 Menu 页面
 */
function insertSuccess() {
  router.push('/Menu');
}
</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <el-card class="menu-insert-card" header="添加一级菜单">
    <my-form type="insert"
             :items="items"
             :rules="rules"
             :args="{module: 'menu'}"
             :api="insertApi"
             :params="data"
             :callback="insertSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.menu-insert-card {
  width: 70%; // 宽度
  margin: 20px auto 0; // 外边距
}
</style>